<template>
  <div>
    <el-card class="box-card">
      <div class="pages">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="从">
            <el-date-picker
              class="dateWidth"
              v-model="searchSupplyTimeFrom"
              type="date"
              placeholder = ""
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="至">
            <el-date-picker
              class="dateWidth"
              v-model="searchSupplyTimeTo"
              type="date"
              placeholder = ""
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <span class="demonstration">栋楼：</span>
            <el-form-item>
            <el-input v-model="tableData.building" placeholder="请输入楼栋"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onlist">查询</el-button>
            <el-button type="primary" style="background-color: firebrick" icon="el-icon-refresh" @click="listoff">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="编号"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.xid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="月份"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.xmonth }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="栋楼"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.building }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="照明用电量小计（度）"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.zhaodian }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="空调用电量小计（度）"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.kongdian }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="总用电量（度）"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.zodian }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="总费用（元）"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.money }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.xid)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paginations.page_index"
          :page-sizes="paginations.page_sizes"
          :page-size="paginations.page_size"
          :layout="paginations.layout"
          :total="paginations.total">
        </el-pagination>
      </div>
      <div>
        <el-dialog title="修改写字楼电费页面" :visible.sync="dialogVisible">
          <el-form :model="input">
            <el-form-item label="电费编号">
              <el-input v-model="input.xid" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="月份">
              <el-input v-model="input.xmonth" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="栋楼">
              <el-input v-model="input.building" autocomplete="off" readonly></el-input>
            </el-form-item>
            <el-form-item label="照明用电量小计（度）">
              <el-input v-model="input.zhaodian" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="空调用电量小计（度）">
              <el-input v-model="input.kongdian" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="总用电量（度）">
              <el-input v-model="input.zodian" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="总费用（元）">
              <el-input v-model="input.money" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'xdf',
  data () {
    return {
      searchSupplyTimeFrom: '',
      searchSupplyTimeTo: '',
      tableData: [],
      dialogVisible: false,
      input: {},
      paginations: {
        page_index: 1, // 当前页
        total: 0, // 总数
        page_size: 8, // 一页显示多少
        page_sizes: [4, 8, 12, 16], // 每页显示多少条
        layout: 'total, sizes, prev, pager, next, jumper'
      },
      allTableData: []
    }
  },
  mounted () {
    this.listoff()
  },
  methods: {
    async onlist () {
      console.log(this.searchSupplyTimeFrom)
      console.log(this.searchSupplyTimeTo)
      console.log(this.tableData.building)
      const { data: res } = await this.$axios.post('/listdate', {
        searchSupplyTimeFrom: this.searchSupplyTimeFrom,
        searchSupplyTimeTo: this.searchSupplyTimeTo,
        building: this.tableData.building
      })
      console.log(res)
      this.allTableData = res
      this.setPaginations()
    },
    setPaginations () {
      this.paginations.total = this.allTableData.length // 数据的数量
      this.paginations.page_index = 1 // 默认显示第一页
      this.paginations.page_size = 8 // 每页显示多少数据

      // 显示数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < this.paginations.page_size
      })
    },
    handleSizeChange (pagesize) {
      this.paginations.page_index = 1 // 第一页
      this.paginations.page_size = pagesize // 每页先显示多少数据
      this.tableData = this.allTableData.filter((item, index) => {
        return index < pagesize
      })
    },
    handleCurrentChange (page) {
      // 跳转页数
      // 获取当前页
      const index = this.paginations.page_size * (page - 1)
      // 获取总数
      const allData = this.paginations.page_size * page

      const tablist = []
      for (let i = index; i < allData; i++) {
        if (this.allTableData[i]) {
          tablist.push(this.allTableData[i])
        }
        this.tableData = tablist
      }
    },
    async update () {
      const { data: res } = await this.$axios.post('/updateoff', this.input)
      console.log(res)
      if (res === true) {
        this.dialogVisible = false
        this.listoff()
      } else {
        this.$message({
          message: '抱歉,亲编辑时遇到了一些问题',
          type: 'warning'
        })
      }
    },
    async listoff () {
      const { data: res } = await this.$axios.post('/listoff')
      console.log(res)
      this.allTableData = res
      this.setPaginations()
    },
    async handleEdit (row) {
      this.dialogVisible = true
      const { data: res } = await this.$axios.post('/listupidoff', {
        xid: row
      })
      this.input = res
    }
  }
}
</script>

<style scoped>
.pages {
  float: left;
}
</style>
